<template>
    <div>
        <div class="chart_detail" ref="chart0"></div>
        <div class="chart_x_first">{{this.first}}</div>
        <div class="chart_x_last">{{this.last}}</div>
    </div>
    
</template>
<script>
import $ from 'jquery';
import * as echarts from 'echarts';
export default {
  props: ["info","id","fanwei","color","background","reasMax","reasMin","height"],
  data() {
    return {
        chart0: null,
        chart0Max:100,//曲线0y轴最大值
        chart0Min:0,//曲线0y轴最小值
        first:'',
        last:'',
        historyData0:{}
    }
  },
  created() {
  },
  methods: {
    //历史曲线
    getHisData(){
        this.$nextTick(() => {
            console.log('获取一次历史数据')
            let time =  Date.parse(new Date())/1000; //当前时间
            //曲线0周温度
            this.historyData0 = {
                'value':[],
                'time':[],
            }
            //温度
            var params = {
                "getdevhistorymap":{
                    "btime":time-this.fanwei,
                    "etime":time,
                    "uid":this.info.uid,
                    "addr":this.info.addr,
                    "id":this.id
                },
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            };
            this.$http.post(this.$baseUrl, params).then((res) => {
                if(res.data.count > 0){
                    this.first = this.formatDate(res.data.starttime * 1000, ' MM-DD H:m')
                    this.last = this.formatDate(res.data.endtime * 1000, ' MM-DD H:m')
                    var l = res.data.getdevhistorymap.length
                    for(var y = 0; y < l; y++){
                        this.historyData0['value'].push(res.data.getdevhistorymap[y].v) 
                        if(y == l-1){
                            this.historyData0['time'].push(this.formatDate(res.data.endtime * 1000, ' MM-DD H:m'))
                            // 最大值
                            this.chart0Max = this.historyData0['value'][0]
                            for (let i = 0; i < this.historyData0['value'].length; i++) {
                                if (this.historyData0['value'][i] > this.chart0Max) {
                                    this.chart0Max = this.historyData0['value'][i];
                                }
                            }
                            this.chart0Max = this.chart0Max + 5
                            if(this.chart0Max < this.reasMax){//当y轴最大值小于合理区间最高值时，取合理区间最高值+5为y轴最大值
                                this.chart0Max = this.reasMax+5
                            }
                            // 最小值
                            this.chart0Min = this.historyData0['value'][0]
                            for (let i = 0; i < this.historyData0['value'].length; i++) {
                                if (this.historyData0['value'][i] < this.chart0Min) {
                                    this.chart0Min = this.historyData0['value'][i];
                                }
                            }
                            this.chart0Min = this.chart0Min -5
                            if(this.chart0Min > this.reasMin){//当y轴最小值大于合理区间最低值时，取合理区间最低值-5为y轴最小值
                                this.chart0Min = this.reasMin-5
                            }
                            this.chart0Min = this.chart0Min.toFixed(0) < 0 ? 0 : this.chart0Min.toFixed(0)
                            this.chart0Max = this.chart0Max + this.findDelta(this.chart0Max.toFixed(0), this.chart0Min.toFixed(0))
                            setTimeout(()=> {
                                this.getCharts0()
                            },500)
                        }else if(y == 0){
                            this.historyData0['time'].push(this.formatDate(res.data.starttime * 1000, ' MM-DD H:m'))
                        }else{
                            this.historyData0['time'].push(this.formatDate(res.data.starttime+y * 1000, ' MM-DD H:m'))
                        }
                    }
                    // console.log(this.historyData0)
                }else{
                    console.log('没有历史数据')
                }
                
            })
        })
    },
    findDelta(x, y) {
        console.log(x,y)
        // 计算 (x - y) 对 5 的余数
        const remainder = (x - y) % 5;
        // 如果余数为 0，则不需要额外加上任何值
        // 如果余数不为 0，则需要加上 (5 - 余数)，使得整个表达式成为 5 的倍数
        const delta = remainder === 0 ? 0 : 5 - remainder;
        return delta;
    },
    getCharts0(){
        $(".chart_detail").css('height',this.height+'px');
      if (this.chart0 == null) {
        this.chart0 = echarts.init(this.$refs.chart0);
      }
      var option = {
  
          xAxis: {
            type: 'category',
            show:false,
            nameLocation: 'middle',
            axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                color: "#233e64" //x轴颜色
                },
            },
            axisLabel: {
                textStyle: {
                    color: "#6a9cd5"
                },
                showMaxLabel: true,//关键部分，显示最后一个label
                // interval:this.historyData0['time'] == undefined ? 0 :this.historyData0['time'].length,//x轴坐标间距，分20格
                interval:0
            },
            data: this.historyData0['time']
          },
          yAxis: {
            type: "value", //y轴数据类型为连续的数据
            min:this.chart0Min.toFixed(0) < 0 ? 0 : this.chart0Min.toFixed(0),//y轴上的刻度最小值
            max:this.chart0Max.toFixed(0),//y轴上的刻度最大值
            // min:"dataMin",//y轴上的刻度最小值
            // max:"dataMax",//y轴上的刻度最大值
            splitNumber: 5, // 设置y轴分割数量为
            splitLine: {
                //y轴上的y轴线条相关设置
                show: true,
                lineStyle: {
                color: "#233e64"
                },
            },
            axisLabel: {
                //y轴的标签相关设置
                textStyle: {
                color: "#6a9cd5"
                },
            },
            axisLine: {
                //y轴的相关设置
                show: true,
                lineStyle: {
                color: "#233e64" //y轴颜色
                }
            },
          },
          series: [
            {
              name: "温度",
              type: 'line', 
              smooth: true,
              showSymbol: false,
              lineStyle: {
                  //线条的相关设置
                  normal: {
                  color: this.color // 线条颜色
                  }
              },
              markArea: {//合理区间
                  itemStyle : { //全局的
                      normal : {
                          color : this.background
                      }
                  },
                  data : [ [ {
                      yAxis : this.reasMin,//y轴坐标控制
                      itemStyle : {
                          color : this.background
                      },
                  }, {
                      yAxis : this.reasMax,//y轴坐标控制
                      itemStyle : {
                          color : this.background
                      }
                  } ] ]
              },
              data:this.historyData0['value']
            }
          ]
      };
      this.chart0.setOption(option);
    },
  }
}
</script>
<style scoped>
.chart_detail {
  width: 100%;
  position: relative;
}
.chart_x_first{
    position: absolute;
    bottom: 45px;
    left: 50px;
    font-size: 12px;
    color:#6a9cd5;
}
.chart_x_last{
    position: absolute;
    bottom: 45px;
    right: 50px;
    font-size: 12px;
    color:#6a9cd5;
}
</style>